<template>
  <div class="apply">
    <a-row :gutter="10">
      <a-col :xl="24" :lg="24" :md="20">
        <a-card>
          <div>
            <a-form-model ref="formCodition" :label-col="{ span: 4, style: 'width:240px;' }"
              :wrapper-col="{ span: 14, style: 'width:calc(100% - 240px)' }" :rules="dialog.rules" :model="dialog.form">
              <a-row :gutter="[48, 0]" class="row">
                <a-col :xl="8" :lg="24" :md="20">
                  <div style="font-size: 24px; font-weight: bold">
                    <span>{{ title }}</span>
                  </div>
                </a-col>
                <a-col :xl="16" :lg="24" :md="20" class="topBtn">
                  <a-form-model-item>
                    <span style="display: flex">
                      <a-button type="primary" :loading="loading" @click="allEvents('add')">保存</a-button>
                      <a-button style="margin-left: 8px" v-if="!dialog.form.id" @click="allEvents('reset')">重置
                      </a-button>
                      <a-button class="export" style="margin-left: 8px" @click="allEvents('addSumbit')">保存并提交</a-button>
                    </span>
                  </a-form-model-item>
                </a-col>
                <div style="padding: 0 10px">
                  <a-divider style="height: 2px; background-color: #02a7f0; margin-top: 10px" />
                </div>
                <a-col :offset="2">
                  <a-col :xl="20" :lg="10" :md="20">
                    <div class="dialog-subtitle">
                      <div class="subtitle">基本信息</div>
                    </div>
                  </a-col>
                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="市场信息分类" prop="infoType">
                      <!-- <a-select show-search optionFilterProp="children" v-model="dialog.form.infoType"
                        placeholder="请选择市场信息分类" style="width: 100%" allowClear>
                        <a-select-option v-for="(item, index) in optionClassification" :key="index"
                          :value="item.dictionaryValue">
                          {{ item.dictionaryName }}
                        </a-select-option>
                      </a-select> -->
                      <a-input v-model="dialog.form.infoType" placeholder="请输入市场信息分类" allowClear></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="客户名称" prop="customName">
                      <a-input v-model="dialog.form.customName" placeholder="请输入客户名称" allowClear></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="标题或关键词" prop="infoTitle">
                      <a-input v-model="dialog.form.infoTitle" placeholder="请输入标题或关键词" allowClear></a-input>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="信息相关区域" prop="infoArea">
                      <a-select show-search optionFilterProp="children" v-model="dialog.form.infoArea"
                        placeholder="请选择信息相关区域" style="width: 100%" allowClear>
                        <a-select-option v-for="(item, index) in optionRegion" :key="index"
                          :value="item.dictionaryValue">
                          {{ item.dictionaryName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>

                  <!-- <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="信息上报人员" prop="reporter">
                      <a-input v-model="dialog.form.reporter" disabled></a-input>
                    </a-form-model-item>
                  </a-col> -->

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="信息上报单位" prop="reporteCompany">
                      <a-select show-search optionFilterProp="children" v-model="dialog.form.reporteCompany"
                        placeholder="请选择信息上报单位" style="width: 100%">
                        <a-select-option v-for="(item, index) in optionDept" :key="index" :value="item.dept_id">
                          {{ item.dept_name }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="信息获取日期" prop="infoDate">
                      <a-date-picker v-model="dialog.form.infoDate" valueFormat="YYYY-MM-DD" placeholder="请选择信息获取日期"
                        style="width: 100%" allowClear />
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="信息来源" prop="infoSource">
                      <a-input v-model="dialog.form.infoSource" placeholder="请输入信息来源" allowClear></a-input>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="客户或中间人的联系方式" prop="infoContact">
                      <a-input v-model="dialog.form.infoContact" placeholder="请输入客户或中间人的联系方式" allowClear>
                      </a-input>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="信息初筛结果" prop="infoStatus">
                      <a-select show-search optionFilterProp="children" v-model="dialog.form.infoStatus"
                        placeholder="请选择信息初筛结果" style="width: 100%" allowClear>
                        <a-select-option v-for="(item, index) in optionResult" :key="index"
                          :value="item.dictionaryValue">
                          {{ item.dictionaryName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="10" :lg="10" :md="20">
                    <a-form-model-item label="跟踪状态" prop="followStatus">
                      <a-select show-search optionFilterProp="children" v-model="dialog.form.followStatus"
                        placeholder="请选择跟踪状态" style="width: 100%" allowClear>
                        <a-select-option v-for="(item, index) in optionState" :key="index"
                          :value="item.dictionaryValue">
                          {{ item.dictionaryName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="20" :lg="20" :md="20">
                    <a-form-model-item label="市场信息内容" prop="infoDesc">
                      <a-input type="textarea" v-model="dialog.form.infoDesc"
                        placeholder="请输入市场信息内容（市场信息内容：包括但不仅限于客户需求内容、服务时间、服务地点、其他相关信息）" allowClear />
                    </a-form-model-item>
                  </a-col>

                  <a-col :xl="20" :lg="10" :md="20">
                    <a-form-model-item label="附件" prop="fileUpload">
                      <fileUpload ref="fileUpload" @getFiles="fileUpload" />
                    </a-form-model-item>
                  </a-col>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <sumbitApprove ref="sumbitApprove" @reset="reset" />
  </div>
</template>
<script>
  import {
    marketInfoAdd,
    marketInfoEdit,
    marketInfoDetail,
  } from '@/api/marketManagement/marketInfo/marketInfo'
  import {
    getDictionariesList
  } from '@/api/common'
  import {
    deptList,
  } from '@/api/maintenance/planningAndBudgeting/preparation'
  import {
    mapGetters
  } from 'vuex'
  import sumbitApprove from '../components/sumbitApprove.vue'
  export default {
    name: 'marketInfoFill',
    components: {
      sumbitApprove,
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    data() {
      return {
        optionClassification: [],
        optionRegion: [],
        optionResult: [],
        optionState: [],
        optionDept: [],

        loading: false,

        title: '市场信息填报',
        dialog: {
          show: false,
          form: {
            infoType: undefined,
            customName: undefined,
            infoTitle: undefined,
            infoArea: undefined,
            reporteCompany: undefined,
            infoDate: this.dateFormatter(new Date(), true),
            infoSource: undefined,
            infoContact: undefined,
            infoStatus: undefined,
            followStatus: undefined,
            infoDesc: undefined,
            fileIds: [],
          },
          rules: {
            infoType: [{
              required: true,
              message: '请输入市场信息分类',
              trigger: 'blur',
            }, ],

            infoArea: [{
              required: true,
              message: '请选择信息相关区域',
              trigger: 'change',
            }, ],
            reporteCompany: [{
              required: true,
              message: '请选择信息上报单位',
              trigger: 'change',
            }, ],
            infoDate: [{
              required: true,
              message: '请选择信息获取日期',
              trigger: 'change',
            }, ],
            infoStatus: [{
              required: true,
              message: '请选择信息初筛结果',
              trigger: 'change',
            }, ],
            followStatus: [{
              required: true,
              message: '请选择跟踪状态',
              trigger: 'change',
            }, ],

          },
        },
      }
    },
    activated() {},
    mounted() {},

    created() {
      this.initData()
    },
    methods: {
      // 附件上传
      fileUpload(fileList, ids) {
        this.dialog.form.fileIds = ids
      },
      reset() {
        this.allEvents('reset')
        this.$emit('reset')
      },
      init(id) {
        this.title = '编辑'
        marketInfoDetail({
          id: id,
        }).then((res) => {
          if (res.accessoryList) {
            this.$refs.fileUpload.inits(res.accessoryList)
          }
          this.dialog.form = res
        })
      },

      allEvents(type, param, param1) {
        switch (type) {
          case 'reset':
            this.$refs.formCodition.resetFields()
            this.$refs.fileUpload.clears()
            this.dialog.form.id = undefined
            this.dialog.form.fileIds = []
            break
          case 'add':
            this.$refs.formCodition.validate((valid) => {
              if (valid) {
                this.loading = true
                if (this.dialog.form.id) {
                  marketInfoEdit(this.dialog.form)
                    .then((res) => {
                      this.$message.success('修改成功')
                      this.allEvents('reset')
                      this.$emit('reset')
                      this.loading = false
                    })
                    .catch((err) => {
                      this.loading = false
                    })
                } else {
                  marketInfoAdd(this.dialog.form)
                    .then((res) => {
                      this.$message.success('添加成功')
                      this.allEvents('reset')
                      this.loading = false
                    })
                    .catch((err) => {
                      this.loading = false
                    })
                }
              }
            })
            break
          case 'addSumbit':
            this.$refs.formCodition.validate((valid) => {
              if (valid) {
                this.$refs.sumbitApprove.init(this.dialog.form, true, '1')
              }
            })
            break
        }
      },
      initData() {

        deptList().then((res) => {
          this.optionDept = res || []
        })
        getDictionariesList('5188d19a3b8c408f9e6408a41e2c0847').then((res) => {
          this.optionClassification = res || []
        })
        getDictionariesList('13aeb95ad98a45d2a0669904d26fe063').then((res) => {
          this.optionRegion = res || []
        })
        getDictionariesList('7c023591cafd411282d0c1a73c643b92').then((res) => {
          this.optionResult = res || []
        })
        getDictionariesList('58b02583ff824bfdbd9529c5c0bd4a7f').then((res) => {
          this.optionState = res || []
        })
      },
    },
  }
</script>

<style lang="less" scoped>
</style>